<template>
  <div class="account-container">
    <div class="control-area">
      <el-button
        type="primary"
        size="small"
        icon="el-icon-circle-plus-outline"
        @click="addSubAccount"
        v-has="'system:user:addSub'"
      >
        创建账号
      </el-button>
    </div>
    <el-table
      :data="userTable"
      style="width: 100%;"
      row-key="id"
      size="small"
      stripe
      border
    >
      <el-table-column
        prop="nickName"
        label="昵称"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="loginName"
        label="用户名"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        width="150"
        align="center"
      ></el-table-column>
      <el-table-column label="状态" width="80" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.status == 0 ? '停用' : '启用' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="行业短信余量" width="" align="center" v-if="!isProject">
        <template slot-scope="{ row }">
          <div v-if="row.walletInfo">
            <span class="sms-count">
              {{ row.walletInfo[0].smsCount }}
            </span>
            <el-button
              type="text"
              size="mini"
              @click="openDistribution(row.walletInfo[0], row.id)"
            >
              分配
            </el-button>
          </div>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column prop="" label="营销短信余量" width="" align="center" v-if="!isProject">
        <template slot-scope="{ row }">
          <div v-if="row.walletInfo">
            <span class="sms-count">
              {{ row.walletInfo[1].smsCount }}
            </span>
            <el-button
              type="text"
              size="mini"
              @click="openDistribution(row.walletInfo[1], row.id)"
            >
              分配
            </el-button>
          </div>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column prop="" label="会销短信余量" width="" align="center" v-if="!isProject">
        <template slot-scope="{ row }">
          <div v-if="row.walletInfo">
            <span class="sms-count">
              {{ row.walletInfo[2].smsCount }}
            </span>
            <el-button
              type="text"
              size="mini"
              @click="openDistribution(row.walletInfo[2], row.id)"
            >
              分配
            </el-button>
          </div>
          <span v-else>--</span>
        </template>
      </el-table-column>
       <el-table-column prop="" label="视频短信余量" width="" align="center" v-if="!isProject">
        <template slot-scope="{ row }">
          <div v-if="row.walletInfo">
            <span class="sms-count">
              {{ row.walletInfo[3].smsCount }}
            </span>
            <el-button
              type="text"
              size="mini"
              @click="openDistribution(row.walletInfo[3], row.id)"
            >
              分配
            </el-button>
          </div>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column prop="" label="操作" width="300" align="center">
        <template slot-scope="{ row }">
          <el-popconfirm
            title="确定禁用该账号吗？"
            @confirm="disable(row)"
            v-if="row.status != 0"
          >
            <el-button type="danger" plain size="mini" slot="reference"  v-has="'system:subuser:update'">
              禁用
            </el-button>
          </el-popconfirm>
          <el-popconfirm
            title="确定启用该账号吗？"
            @confirm="open(row)"
            v-if="row.status == 0"
          >
            <el-button type="success" plain size="mini" slot="reference"  v-has="'system:subuser:update'">
              启用
            </el-button>
          </el-popconfirm>
          <el-popconfirm
            title="确定重置该客户密码吗？"
            @confirm="resetPwd(row.id)"
            style="margin: 0 10px;"
          >
            <el-button type="primary" plain size="mini" slot="reference" v-has="'system:user:resetpwdSub'">
              重置密码
            </el-button>
          </el-popconfirm>
          <el-button
            type="success"
            :plain="row.bindingState == 0 ? true : false"
            size="mini"
            @click="bindingWx(row.id, $event)"
            v-if="!isProject"
          >
            {{ row.bindingState == 0 ? '绑定微信' : '更换绑定' }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        layout="prev, pager, next"
        :current-page="page.current"
        :page-size="page.size"
        :total="page.total"
        @current-change="changePage"
      ></el-pagination>
    </div>
    <Distribution ref="distribution" @distributionSuccess="getUserList" />
    <WxBinding ref="wxBinding" />
    <AddchildAccount ref="AddchildAccount" @addSuccess="getUserList" />
  </div>
</template>

<script>
import { getSubUserByPage } from 'src/api/permission'
import { close, open, wxBindStateByUserId } from 'src/api/user'
import {
  walletInfoByUserId,
  resetpwd,
  createWxBindQrCode,
  resetpwdSub,
} from 'src/api/user'
import Distribution from './components/Distribution.vue'
import WxBinding from './components/WxBinding.vue'
import AddchildAccount from './components/AddchildAccount.vue'
export default {
  name: 'ChildAccount',
  components: { Distribution, WxBinding, AddchildAccount },
  data() {
    return {
      userTable: [],
      page: {
        current: 1,
        size: 10,
        total: 0,
      },
    }
  },
  created() {
    this.getUserList()
  },
  methods: {
    wxBindStateByUserId() {
      let idList = []
      this.userTable.forEach((item) => {
        idList.push(item.id)
      })
      wxBindStateByUserId({ idList }).then((response) => {
        let arr = response.data.userStateList
        this.userTable.forEach((item, index) => {
          this.$set(item, 'bindingState', arr[index].state)
        })
      })
    },
    // 用户列表
    getUserList(current) {
      getSubUserByPage({
        page: current,
        pageSize: this.page.size,
      }).then((response) => {
        this.userTable = response.data.records
        this.page.current = response.data.current
        this.page.total = response.data.total
        if(!this.isProject){
          this.walletInfoByUserId()
          this.wxBindStateByUserId()
        }
      })
    },
    // 套餐余量
    walletInfoByUserId() {
      let idList = []
      this.userTable.forEach((item) => {
        idList.push(item.id)
      })
      walletInfoByUserId({
        idList,
      }).then((response) => {
        let arr = response.data.walletInfo
        this.userTable.forEach((item, index) => {
          this.$set(item, 'walletInfo', arr[index].smsInfo)
        })
      })
    },
    // 分页
    changePage(current) {
      this.getUserList(current)
    },
    // 分配弹窗
    openDistribution(info, id) {
      this.$refs.distribution.show(info, id)
    },
    // 修改
    updateRow(index, row) {
      this.$router.push({
        path: '/permission/user-update',
        query: { id: row.id },
      })
    },
    // 重置密码
    resetPwd(id) {
      resetpwdSub({ id }).then((response) => {
        if (response.code == 20000) {
          let data = response.data
          this.$confirm(
            `您的密码已被修改为<strong>${data}</strong>`,
            '重置成功',
            {
              confirmButtonText: '复制',
              cancelButtonText: '取消',
              center: true,
              type: 'success',
              closeOnClickModal: false,
              dangerouslyUseHTMLString: true,
            },
          )
            .then(() => {
              //创建一个input元素
              let input = document.createElement('input')
              //给input的内容复制
              input.value = data
              // 在body里面插入这个元素
              document.body.appendChild(input)
              // 选中input里面内容
              input.select()
              //执行document里面的复制方法
              document.execCommand('Copy')
              // 复制之后移除这个元素
              document.body.removeChild(input)
              this.$message.success({
                message: '复制成功',
                duration: 2000,
                center: true,
              })
            })
            .catch(() => {})
        }
      })
    },
    // 禁用
    disable(row) {
      close({ id: row.id }).then((response) => {
        if (response.code == 20000) {
          this.$message.success({
            message: '已成功禁用该账号',
            duration: 2000,
            center: true,
          })
          this.getUserList()
        }
      })
    },
    // 启用
    open(row) {
      open({ id: row.id }).then((response) => {
        if (response.code == 20000) {
          this.$message.success({
            message: '已成功启用该账号',
            duration: 2000,
            center: true,
          })
          this.getUserList()
        }
      })
    },
    // 验证是否绑定过微信
    bindingWx(id, e) {
      let target = e.target
      if (target.nodeName == 'SPAN' || target.nodeName == 'I') {
        target = e.target.parentNode
      }
      target.blur()
      createWxBindQrCode({ userId: id }).then((response) => {
        if (response.code == 20000) {
          if (response.data.msg) {
            this.$confirm(response.data.msg, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
            })
              .then(() => {
                this.$refs.wxBinding.show(id, response)
              })
              .catch(() => {})
            // this.$refs.wxBinding.showRebind(response.data.msg,id)
          } else {
            this.$refs.wxBinding.show(id, response)
          }
        }
      })
    },
    // 添加子账号
    addSubAccount() {
      this.$refs.AddchildAccount.show()
    },
  },
}
</script>

<style lang="scss" scoped>
.account {
  &-container {
    padding: 30px;
    .control {
      &-area {
        margin-bottom: 8px;
      }
    }
    .pagination {
      margin-top: 12px;
      display: flex;
      justify-content: center;
    }
    .sms-count {
      margin-right: 5px;
    }
  }
}
</style>
